<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
	String path = request.getContextPath();
	// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。
	pageContext.setAttribute("basePath",basePath);
%> 

<title>入门登记</title>
<link rel="stylesheet" type="text/css" href="../../statics/custom/custom.css">
<link rel="stylesheet" type="text/css" href="../../statics/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../statics/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../statics/easyui/themes/color.css">
<script src="../../statics/js/jquery/jquery-1.11.1.min.js"></script>
<script src="../../statics/easyui/jquery.easyui.min.js"></script>
<script src="../../statics/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="../../statics/easyui/datagrid-detailview.js"></script>
<script src="../../statics/easyui/datagrid-filter.js"></script>
<script src="../../statics/custom/custom.js"></script>
<script src="../../statics/custom/easyui.extends.js"></script>
<script src="../../statics/custom/easyui.crudgrid.extends.js"></script>
<script src="../../statics/custom/easyui.dialog.extends.js"></script>
<script src="../../statics/custom/easyui.tabs.extends.js"></script>
<script src="../../statics/custom/pinyin.js"></script>
<script type="text/javascript">
var auto=false;
$(function() {
	var $grid = $('#enter_door_list');
	var $title = '入门记录';
	var $baseUrl = '${pageScope.basePath}security/gard';
	$grid.datagrid({
		title : $title + '列表',
		//url : $baseUrl + '/noUsedPage?sort=idNo',
		url : $baseUrl + '/page?sort=createTime,desc',
		fit : true ,
		fitColumns : true,
		dialog : {
			url : $baseUrl,
			name : $title,
			create : {
				width : 600,
				height : 300,
				url : 'create',
				action : 'save'
			},
			update : {
				width : 800,
				height : 300,
				url : 'update',
				action:'save'
			}
		},
		pagination : true,
		pageSize : 20,
		onLoadSuccess:function(data){$('#idNo').textbox().next('span').find('input').focus();},
		onClickRow:function(index,row){$('#idNo').textbox().next('span').find('input').focus();},
		pageList : [ 20, 50, 100 ],
		columns : [ [{
			field : 'id',
			hidden : true
		},{
			field : 'createTime',
			title : '进门时间',
			width : 200
		}, {
			field : 'name',
			width : 200,
			title : '姓名'
		},{
			field : 'sex',
			width : 200,
			title : '性别'
		},{
			field : 'nation',
			width : 200,
			title : '民族'
			
		},{
			field : 'dept',
			width : 200,
			title : '部门'
		},{
			field : 'status',
			width : 200,
			title : '人员类别'
		}]]
	}).datagrid('search.init');
	
	var idInp=$('#idNo').textbox().next('span').find('input');
	idInp.focus();

});
//播放音乐 路径应该写正确
function playmu(k){
	aaaaa.innerHTML="<EMBED src=\""+k+"\" style=\"display:none; HEIGHT: 40px; WIDTH: 70px\" type=audio/mpeg AUTOSTART=\"1\" loop=\"0\"></EMBED><p>playing : "+k+"</p>";
}
//停止播放
function playmustop(){
	aaaaa.innerHTML="";
}

</script>
<style type="text/css">
	form ul {list-style-type: none;}
	form ul li{margin-bottom: 10px;}
	img {float:right;border:1px solid #ddd;margin-top:10px;width:102px;height:126px;}
	p input{width:150px;color:blue;}
	
</style>
</head>
<body>
	<div id="mainLayout" class="easyui-layout hidden" data-options="fit: true">
		<div data-options="region:'north'" style="height: 50px; background: url(../../statics/images/logo.png); padding: 8px;">
			<div style="float: right; padding-top: 10px; color: #FFFFFF">
				<span>当前用户：<sec:authentication property="principal.name"></sec:authentication></span> <a href="logout" style="text-decoration: none; color: #FFFFFF; padding-left: 5px;">注销</a>
			</div>
		</div>
		<div data-options="region:'center'">
			<div class="easyui-layout" data-options="fit:true">
				<div data-options="region:'west'" style="width: 300px;">
					<div class="easyui-panel" title="入门登记" style="width:100%;height:30%;background:#fafafa;">
						<form id="ff" action="security/gard/login" method="post" >
							<ul>
								<li>
									<h4>身份证：</h4>
									<input id="idNo" type="text" id="idNo" class="easyui-textbox" name="idNo"  />								
								</li>
								<li>
									<h4>姓名：</h4>
									<input type="text" id="name" class="easyui-textbox" name="name" data-options="onChange:function(newValue,oldValue){
										idNo=$('#idNo').val();
										name=newValue;
										if(idNo==''){
											return;
										}
										$.messager.progress();	// 显示进度条
										$.post('login',{'idNo':idNo,'auto':auto},function(data){
											$.messager.progress('close');	// 如果提交成功则隐藏进度条
											//alert(data);
											$('#ff').form('reset');
											$('#idNo').textbox().next('span').find('input').focus();
											var json=eval('('+data+')');
											var success=json.success;
											if(success){
												var door=json.door;
												$('#nameA').textbox('setValue',door.name);
												$('#sex').textbox('setValue',door.sex);
												$('#nation').textbox('setValue',door.nation);
												$('#dept').textbox('setValue',door.dept);
												$('#status').textbox('setValue',door.status);
												$('#photo').attr('alt','');
												$('#photo').attr('src','${pageScope.basePath}hrm/idCade/imageStream?idNo='+door.idNo);
												$('#enter_door_list').datagrid('load');
												//播放开门录音	
												playmu('../../statics/images/tongguo.mp3');
											}else{
												$('#nameA').textbox('setValue',name);
												$('#sex').textbox('setValue','');
												$('#nation').textbox('setValue','');
												$('#dept').textbox('setValue','');
												$('#status').textbox('setValue',json.msg);
												$('#photo').attr('alt','无照片');
												$('#photo').attr('src','${pageScope.basePath}hrm/idCade/imageStream?idNo='+idNo);
												//播放不能开门的录音
												playmu('../../statics/images/wlry.mp3');	
											}
										});
										
									}"/>
								</li>
							</ul>
							
						</form>
					</div>
					<div class="easyui-panel" title="人员资料"  style="width:100%;height:70%;padding:10px;background:#fafafa;" >
						<img alt="" id="photo" src="${pageScope.basePath}hrm/idCade/imageStream?idNo=aaaaa">
						<p>姓名：<input id="nameA" class="easyui-textbox" value="" data-options="width:130,disabled:true" ></p>
						<p>性别：<input id="sex" class="easyui-textbox" value="" data-options="width:130,disabled:true"></p> 
						<p>民族：<input id="nation" class="easyui-textbox" value="" data-options="width:130,disabled:true"></p>
						<p>性质：<input id="status" class="easyui-textbox" value="" data-options="width:130,disabled:true"></p>
						<p>部门：<input id="dept" class="easyui-textbox" value="" data-options="width:200,disabled:true"></p>
						<p>自动开门：<input id="auto" class="easyui-switchbutton" data-options="onText:'是',offText:'否',onChange:function(checked){auto=checked;$('#idNo').textbox().next('span').find('input').focus();}"></p>
					</div>
				</div>
				<div data-options="region:'center'">
					<table id="enter_door_list"></table>
				</div>
			</div>
		</div>
	</div>
	<div id="aaaaa" align="center"></div>
</body>
</html>